<template>
  <div class="home-page">
    <div class="header">数据更新截止时间：{{ currentTime }}</div>
    <div class="flow-wrap">
      <!--泳道-->
      <div class="step" style="height:230px;">
        <div class="step-title-revnue">营收</div>
        <!--节点-->
        <div class="step-item" style="left:40px;top:90px;">需求提出</div>
        <div class="step-item" style="left:180px;top:90px;">需求承接</div>
        <div class="step-item" style="left:320px;top:90px;">需求整合</div>
        <div class="step-item-reven" style="left:460px;top:90px;">订单编制<br>/确认</div>
        <div class="step-item-reven" style="left:600px;top:90px;">订单修正<br>/交付</div>
        <div class="step-item" style="left:740px;top:90px;">订单起租</div>
        <div class="step-item" style="left:880px;top:90px;">订单出账</div>
        <div class="step-item" style="left:1020px;top:90px;">服务终止</div>
        <div class="step-item" style="left:460px;top:154px;">选址谈判</div>

        <!--超链接-->
        <div class="step-link" style="left:600px;top:6px;" @click="$router.push({name:'biz-itps'})">
          <img class="imgico" :src="imageType.normal" />
          站址拆站发起实时提示
        </div>
        <div class="step-link" style="left:600px;top:26px;" @click="$router.push({name:'biz-bfbo'})">
          <img class="imgico" :src="imageType.normal" />
          非塔类订单绑定资源合规性校验
        </div>
        <div class="step-link" style="left:600px;top:46px;"  @click="$router.push({name:'biz-os'})">
          <img class="imgico" :src="imageType.normal" />
          沉淀固化数据实时校验
        </div>
        <div class="step-link" style="left:600px;top:66px;" @click="$router.push({name:'biz-prc'})">
          <img class="imgico" :src="imageType.normal" />
          产品与资源一致性校验
        </div>
        <div class="step-link" style="left:216px;top:66px;" @click="$router.push({name:'biz-lal'})">
          <img class="imgico" :src="imageType.normal" />
          站址周边场租水平提示
        </div>
        <div class="step-link" style="left:976px;top:66px;" >
          <img class="imgico" :src="imageType.normal" />
          退租订单在途业务提示
        </div>
      
         <!--文本-->
        <div class="step-link step-line-text" style="left:118px;top:98px;font-size:2px;" >
          需求数据
        </div>
        <div class="step-link step-line-text" style="left:256px;top:98px;font-size:2px;" >
          需求数据
        </div>
        <div class="step-link step-line-text" style="left:540px;top:98px;font-size:2px;" >
          订单数据
        </div>
        <div class="step-link step-line-text" style="left:680px;top:98px;font-size:2px;" >
          订单数据
        </div>
         <div class="step-link step-line-text" style="left:820px;top:98px;font-size:2px;" >
          订单数据
        </div>
         <div class="step-link step-line-text" style="left:280px;top:298px;font-size:2px;" >
          站址数据
        </div> 
         <div class="step-link step-line-text" style="left:430px;top:448px;font-size:2px;" >
          物业信息
        </div>
        <div class="step-link step-line-text" style="left:860px;top:595px;font-size:2px;" >
          资产数据
        </div>  

        <div class="step-link step-line-text" style="left:320px;top:535px;font-size:2px;" >
          站址数据
        </div> 

         <div class="step-link step-line-text" style="left:470px;top:132px;font-size:2px;" >
          站址数据
        </div> 

         <div class="step-link step-line-text" style="left:390px;top:136px;font-size:2px;" >
          需求数据<br>
          站址数据
        </div>

        <div class="step-link step-line-text" style="left:720px;top:166px;font-size:2px;" >
          资源数据
        </div>


         <div class="step-link step-line-text" style="left:470px;top:220px;font-size:2px;" >
          站址数据
        </div>     
         <div class="step-link step-line-text" style="left:830px;top:290px;font-size:2px;" >
          合同信息
        </div>    
        <div class="step-link step-line-text" style="left:830px;top:544px;font-size:2px;" >
          站址数据
        </div>  
        <div class="step-link step-line-text" style="left:1024px;top:370px;font-size:2px;" >
          电费信息
        </div>
        <div class="step-link step-line-text" style="left:1078px;top:320px;font-size:2px;" >
          资产信息
        </div>    
        <!--线-->
        <div class="step-line" style="left:110px;top:106px;width:60px;"></div>
        <div class="step-line" style="left:252px;top:106px;width:60px;"></div>
        <div class="step-line" style="left:532px;top:106px;width:60px;"></div>
        <div class="step-line" style="left:672px;top:106px;width:60px;"></div>
        <div class="step-line" style="left:812px;top:106px;width:60px;"></div>
        <div class="step-line verline" style="left:375px;top:118px;height:50px;"></div>
        <div class="step-line" style="left:375px;top:167px;width:80px;"></div>
        <div class="step-line verline" style="left:335px;top:116px;height:468px;"></div>
        <div class="step-line verline" style="left:345px;top:126px;height:468px;"></div>
        <div class="step-line verline" style="left:355px;top:126px;height:330px;"></div>
        <div class="step-line" style="left:355px;top:456px;width:236px;"></div>
        <div class="step-line" style="left:810px;top:456px;width:66px;"></div>
        <div class="step-line" style="left:750px;top:604px;width:264px;"></div>
        <div class="step-line verline" style="left:495px;top:182px;height:100px;"></div>
        <div class="step-line verline" style="left:495px;top:124px;height:30px;"></div>
        <div class="step-line " style="left:495px;top:304px;width:280px;"></div>
        <div class="step-line verline" style="left:775px;top:304px;height:132px;"></div>
        <div class="step-line verline" style="left:775px;top:120px;height:59px;"></div>
        <div class="step-line " style="left:716px;top:178px;width:60px;"></div>
        <div class="step-line verline" style="left:716px;top:178px;height:412px;"></div>
        <div class="step-line " style="left:530px;top:298px;width:500px;"></div>

        <div class="step-line verline" style="left:1030px;top:124px;height:175px;"></div>

         <div class="step-line " style="left:670px;top:456px;width:64px;"></div>
         <div class="step-line verline" style="left:1040px;top:124px;height:215px;"></div>
         <div class="step-line " style="left:990px;top:338px;width:50px;"></div>
         <div class="step-line verline" style="left:990px;top:338px;height:215px;"></div>
         <div class="step-line " style="left:362px;top:552px;width:628px;"></div>
         <div class="step-line verline" style="left:362px;top:552px;height:38px;"></div>

         <div class="step-line verline" style="left:1050px;top:124px;height:316px;"></div>
         <div class="step-line verline" style="left:1070px;top:124px;height:46px;"></div>

         <div class="step-line " style="left:1070px;top:170px;width:36px;"></div>

          <div class="step-line verline" style="left:1106px;top:170px;height:430px;"></div>
          <div class="step-line " style="left:1090px;top:600px;width:17px;"></div>
         


        <!--箭头-->
        <div class="step-line-arrow to_right" style="left:170px;top:103px;"></div>
        <div class="step-line-arrow to_right" style="left:310px;top:103px;"></div>
        <div class="step-line-arrow to_right" style="left:592px;top:103px;"></div>
        <div class="step-line-arrow to_right" style="left:732px;top:103px;"></div>
        <div class="step-line-arrow to_right" style="left:872px;top:103px;"></div>
        <div class="step-line-arrow to_right" style="left:453px;top:164px;"></div>
        <div class="step-line-arrow to_bottom" style="left:332px;top:582px;"></div>
        <div class="step-line-arrow to_top" style="left:342px;top:118px;"></div>
        <div class="step-line-arrow to_top" style="left:352px;top:118px;"></div>
        <div class="step-line-arrow to_right" style="left:592px;top:452px;"></div>

        <div class="step-line-arrow to_right" style="left:870px;top:453px;"></div>
        <div class="step-line-arrow to_right" style="left:870px;top:453px;"></div>

        <div class="step-line-arrow to_right" style="left:1012px;top:600px;"></div>
        <div class="step-line-arrow to_bottom" style="left:492px;top:282px;"></div>
        <div class="step-line-arrow to_top" style="left:492px;top:118px;"></div>

        <div class="step-line-arrow to_bottom" style="left:772px;top:434px;"></div>

         <div class="step-line-arrow to_top" style="left:771px;top:118px;"></div>
         <div class="step-line-arrow to_top" style="left:1027px;top:118px;"></div>

         <div class="step-line-arrow to_right" style="left:734px;top:452px;"></div>
         <div class="step-line-arrow to_top" style="left:1037px;top:118px;"></div>
         <div class="step-line-arrow to_top" style="left:1047px;top:118px;"></div>
         <div class="step-line-arrow to_top" style="left:1067px;top:118px;"></div>


      </div>
      <div class="step">
        <div class="step-title-revnue" >合同管理</div>
        <div class="step-item" style="left:460px;top:60px;">物业合同</div>
      </div>
      <div class="step">
        <div class="step-title-revnue" >物业管理</div>
          <div class="step-item" style="left:600px;top:60px;">物业信息</div>
          <div class="step-item" style="left:740px;top:60px;">场租卡片</div>
          <div class="step-item" style="left:880px;top:60px;">租金支付</div>
          <div class="step-item" style="left:1020px;top:60px;">电费支付</div>
      </div>
      <div class="step">
        <div class="step-title-revnue" >资源资产管理</div>

        <div class="step-item" style="left:320px;top:60px;">站址数据</div>
        <div class="step-item" style="left:680px;top:60px;">资源管理</div>
        <div class="step-item" style="left:1020px;top:60px;">资产管理</div>

        <!--线-->

        
      </div>
     
    </div>
  </div>
</template>

<style>
  .home-page {
    position: relative;
    width: 100%;
    border-right: 1px solid #f4f4f4;
    background: #fff;
  }

  .home-page>.header {
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    background: #eaeaea;
    border-bottom: 1px solid #c7c7c7;
    text-align: center;
  }

  .home-page>.flow-wrap {
    overflow: auto;
  }

  .flow-wrap>.step {
    position: relative;
    width: 100%;
    min-width: 1120px;
    height: 150px;
    border-bottom: 1px dashed #bababa;
  }

  .step .step-title {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 30px;
    font-size: 13px;
    text-align: center;
    font-weight: bold;
    line-height: 20px;
    background: #c7eaf6;
    padding: 60px 5px;
  }

 .step .step-title-revnue {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 30px;
    font-size: 13px;
    text-align: center;
    font-weight: bold;
    background: #c7eaf6;
    
    /* padding: 60px 5px; */

    display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  -webkit-box-align: center;

  display: -moz-box;
  -moz-box-orient: horizontal;
  -moz-box-pack: center;
  -moz-box-align: center;

  display: -o-box;
  -o-box-orient: horizontal;
  -o-box-pack: center;
  -o-box-align: center;

  display: -ms-box;
  -ms-box-orient: horizontal;
  -ms-box-pack: center;
  -ms-box-align: center;

  display: box;
  box-orient: horizontal;
  box-pack: center;
  box-align: center;
  }

  .step-title.offset15 {
    padding-top: 50px;
  }

  .step-item {
    position: absolute;
    height: 28px;
    width: 70px;
    font-size: 12px;
    background: #0053a7;
    border: 1px solid #044689;
    color: #fff;
    text-align: center;
    border-radius: 3px;
    cursor: default;
    /* transform: scale(0.6); */
    white-space: pre-wrap;
  }

 .step-item-reven {
    position: absolute;
    /* height: 28px; */
    width: 70px;
    font-size: 12px;
    background: #0053a7;
    border: 1px solid #044689;
    color: #fff;
    text-align: center;
    border-radius: 3px;
    cursor: default;
    /* transform: scale(0.6); */
    white-space: pre-wrap;
  }

  .step-item:hover {
    background: #044689;
  }

  .step .flow-lendge {
    position: absolute;
    width: 600px;
  }

  .step .step-link {
    position: absolute;
    font-size: 12px;
    cursor: pointer;
    z-index: 5;
  }

  .step .step-link:hover {
    color: #4390ea;
  }


  .step-link .imgico {
    width: 16px;
    height: 16px;
    margin-right: 0px;
    margin-top: -6px;
  }

  .flow-lendge>.lendge-item {
    float: left;
    margin-right: 15px;
    font-size: 12px;
    height: 24px;
    line-height: 24px;
  }

  .lendge-item .imgico {
    width: 16px;
    height: 16px;
    margin-right: 5px;
    margin-top: -4px;
  }

  .step-item.lgbtn {
    width: 200px;
    cursor: pointer;
  }

  .step-item.lgbtn:hover {
    background: #fff;
    color: #0053a7;
    font-weight: 550;
  }

  .step-line {
    position: absolute;
    height: 1px;
    border-bottom: 1px solid #666;
  }

  .step-line.verline {
    width: 1px;
    border-bottom: none;
    border-left: 1px solid #666;
  }

  .step-line-arrow {
    position: absolute
  }

  .step-line-arrow.to_top {
    width: 0;
    height: 0;
    border-bottom: 8px solid #666;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
  }

  .step-line-arrow.to_bottom {
    width: 0;
    height: 0;
    border-top: 8px solid #666;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
  }

  .step-line-arrow.to_left {
    width: 0;
    height: 0;
    border-right: 8px solid #666;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
  }

  .step-line-arrow.to_right {
    width: 0;
    height: 0;
    border-left: 8px solid #666;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
  }
  .step-line-text{
      background-color: #fff;
      font-size: 50%;
  }
</style>

<script>

  export default {
    data() {
      return {
        currentTime: '2020-12-01 00:00:00',
        icoType: 'normal',
        imageType:{
          normal:require("@/assets/img/normal.png"),
          error:require("@/assets/img/error.png"),
          warning:require("@/assets/img/warning.png")
        },
        sceneImage:{
           'scene1.5':require("@/assets/img/normal.png"),
           'scene2.2':require("@/assets/img/normal.png"),
           'scene2.3':require("@/assets/img/normal.png"),
           'scene2.6':require("@/assets/img/normal.png"),
           'scene2.8':require("@/assets/img/normal.png"),
           'scene2.9':require("@/assets/img/normal.png"),
           'scene2.10':require("@/assets/img/normal.png"),
           'scene2.11':require("@/assets/img/normal.png"),
           'scene2.12':require("@/assets/img/normal.png"),
           'scene2.13':require("@/assets/img/normal.png"),
           'scene2.14':require("@/assets/img/normal.png"),
           'scene2.15':require("@/assets/img/normal.png"),
           'scene2.16':require("@/assets/img/normal.png"),
           'scene2.17':require("@/assets/img/normal.png"),
           'scene2.18':require("@/assets/img/normal.png"),
           'scene2.21':require("@/assets/img/normal.png"),
           'scene2.22':require("@/assets/img/normal.png"),
           'scene2.23':require("@/assets/img/normal.png"),
           'scene2.25':require("@/assets/img/normal.png")
        }
      }
    },
    created() {
      this.setCurrentTime()
      this.queryPageCount('*')

      console.log("当前用户:["+sessionStorage.getItem('userName')+"]");
    },
    computed: {
    },
    methods: {
      dateFormat(date) {
        const timeDate = new Date(date.getTime() + (8 * 3600 * 1000))
        const timeDateString = timeDate.toJSON()
        return timeDateString.replace('T', ' ').slice(0, 19)
      },
      setCurrentTime() {
        this.currentTime = this.dateFormat(new Date())
      },
      setSceneImage(scene,per){
          var key = 'scene'+scene;
          if(per > 0.4 && per <= 0.7){
             this.sceneImage[key]=this.imageType.warning;
          }else if(per > 0.7){
             this.sceneImage[key]=this.imageType.error;
          }else{
            this.sceneImage[key]=this.imageType.normal;
          }
      },
      async queryPageCount(scene) {
        try {
          const r = await this.$http({
            url: this.$http.adornBizUrl('/log/queryStatistics'),
            method: 'post',
            data: this.$http.adornData('param=' + JSON.stringify({scene:scene}), false),
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
            }
          })
          //console.log(r.data.data);
          var self = this;
          if(r.data.data && r.data.data.length >0){
              var scenes = r.data.data;
              scenes.forEach((item,i)=>{
                  self.setSceneImage(item.scene,item.per);
              });
          }
        } catch (e) {
          console.log(e)
        } finally {
        }
      }
    }
  }
</script>
